<template>
	<view>
			<view class="cu-form-group">
				<view class="title">头像</view>
				<view class="cu-avatar radius bg-gray"></view>
			</view>
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" name="input" placeholder-class="input" class="input" @click="modalName='bottomModal'"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'请选择性别'}}
					</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">生日</view>
				<picker mode="date" :value="date" start="2015-09-01" end="2040-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" name="input" placeholder-class="input" class="input" @click="modalName='bottomModal'"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">会员码</view>
				<view class="cu-avatar radius bg-gray" @click="modalName='Image'"></view>
			</view>
			
			
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
						<view class="action text-green">确定</view>
					</view>
					<view class="padding-xl">
						<textarea name="" class="bz p-2 bg-white b-radius2 write" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
					</view>
				</view>
			</view>
			
			<view class="cu-modal" :class="modalName=='Image'?'show':''">
				<view class="cu-dialog">
					<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
						<view class="cu-bar justify-end text-white">
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close "></text>
							</view>
						</view>
					</view>
					<view class="cu-bar bg-white">
						<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
					</view>
				</view>
			</view>
			
			
			<view class="bz p-3 mt-5">
				<button class="cu-btn bg-green">提交</button>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				picker: ['男性', '女性'],
				date: '2018-12-25',
				modalName:''
			};
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			
			DateChange(e) {
				this.date = e.detail.value
			},
			hideModal(){
				this.modalName=''
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.write{
		width: 100%;
		height: 400rpx;
		text-align: left;
		line-height: 45rpx;
		font-size: 30rpx;
	}
	.input{
		text-align: right;
		color: rgba(0,0,0,0.9);
	}
	.cu-btn{
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
	}
</style>
